<template>
  <el-container class="">
    <el-header style="text-align: right; font-size: 12px">
      <div class="toolbar">
        <el-input v-model="sousuo"
                  style="width: 340px"
                  placeholder="输入救助ID、救助人姓名或手机号"
                  prefix-icon="Search"
                  clearable />
        <p class="but sousuo"
           @click="search()">搜索</p>
        <p class="but sousuo"
           @click="chongzhi()">重置</p>
      </div>
    </el-header>

    <el-main>
      <el-scrollbar>
        <el-table :data="list"
                  empty-text="暂无数据">
          <el-table-column prop="help_id"
                           width="100"
                           label="救助ID">
          </el-table-column>
          <el-table-column width="180"
                           label="救助前图片">
            <template #default="scope">
              <img :src="scope.row.after_img"
                   alt="救助前图片"
                   style="width: 150px; height: 80px; ">
            </template>
          </el-table-column>
          <el-table-column width="180"
                           label="救助后图片">
            <template #default="scope">
              <img :src="scope.row.befor_img"
                   alt="救助后图片"
                   style="width: 150px; height: 80px; ">
            </template>
          </el-table-column>
          <el-table-column width="340"
                           label="救助信息">
            <template #default="scope">
              <p class="xinxi">救助人姓名：<span>{{ scope.row.true_name }}</span></p>
              <p class="xinxi">救助人电话：<span>{{ scope.row.phone }}</span></p>
              <p class="xinxi">宠物类型：<span>{{ scope.row.breed }}</span></p>
              <p class="xinxi">救助地址：<span>{{ scope.row.address }}</span></p>
              <p class="xinxi">备注：<span>{{ scope.row.remark }}</span></p>
              <p class="xinxi">发起时间：<span>{{ scope.row.go_time }}</span></p>
              <p class="xinxi">完成时间：<span>{{ scope.row.end_time }}</span></p>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template #default="scope">

              <el-button size="small"
                         type="danger"
                         @click="buguo(scope.row.help_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-main>
    <el-dialog v-model="centerDialogVisible"
               width="500"
               align-center
               center
               title="确定删除该救助信息？"
               @close="huanQu"
               :close-on-click-modal="false">
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="huanQu()">取消</el-button>
          <el-button type="primary"
                     @click="huanDing()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>



<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '@/axios'
let list = ref([])
let datas = ref([])
let pet_id = ref('')
let sousuo = ref('')
let centerDialogVisible = ref(false)

// 模糊搜索
const search = () => {
  if (sousuo.value == '') {
    ElMessage({
      message: `请输入搜索内容！`,
      type: 'error'
    })
  } else {
    list.value = datas.value.filter((item) => {
      return (
        item.true_name.includes(sousuo.value) ||
        item.phone.includes(sousuo.value) ||
        sousuo.value == item.help_id
      )
    })
    if (list.value.length == 0) {
      list.value = datas.value
      ElMessage({
        message: `没有找到相关内容！`,
        type: 'error'
      })
    }
  }
}
const chongzhi = () => {
  sousuo.value = ''
  list.value = datas.value
}
//不通过
const buguo = (index) => {
  centerDialogVisible.value = true
  pet_id.value = index
}
const huanQu = () => {
  centerDialogVisible.value = false
  pet_id.value = ''
  sousuo.value = ''
}
const huanDing = () => {
  axios
    .post('/jiushen', { help_id: pet_id.value, state: 4 })
    .then((d) => {
      if (d == '修改成功！') {
        ElMessage({
          message: `救助信息删除成功！`,
          type: 'success'
        })
        centerDialogVisible.value = false
      }
      setTimeout(() => {
        axios
          .get('/jiuzhu')
          .then((d) => {
            //过滤数据
            datas.value = d.filter((item) => {
              return item.status == '救助完成'
            })
            list.value = datas.value
          })
          .catch((err) => console.log(err))
      }, 10)
    })
    .catch((err) => console.log(err))
  sousuo.value = ''
}

onMounted(() => {
  axios
    .get('/jiuzhu')
    .then((d) => {
      //过滤数据
      datas.value = d.filter((item) => {
        return item.status == '救助完成'
      })
      list.value = datas.value
      // console.log(list.value)
    })
    .catch((err) => console.log(err))
})
</script>

<style scoped lang="less">
.shuru {
  width: 100%;
  text-align: center;
}
.sousuo {
  width: 60px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  margin-left: 10px;
  padding: 0 10px;
}
.xinxi {
  margin: 3px 0;
}
.head_img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: #cdbf62;
  color: var(--el-text-color-primary);
}
</style>

